import React from 'react';
import {
  Box,
  List,
  ListItem,
  ListItemIcon,
  ListItemText,
  ListItemButton,
  Divider,
  Typography,
  Avatar,
  useTheme
} from '@mui/material';
import {
  Home as HomeIcon,
  Article as ArticleIcon,
  Category as CategoryIcon,
  LocalOffer as TagIcon,
  Dashboard as DashboardIcon,
  Settings as SettingsIcon,
  Person as PersonIcon
} from '@mui/icons-material';
import { useNavigate, useLocation } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { useTranslation } from 'react-i18next';
import { RootState } from '../../store';

interface SidebarProps {
  onClose?: () => void;
}

interface MenuItem {
  text: string;
  path: string;
  icon: React.ReactElement;
  roles?: string[];
}

const Sidebar: React.FC<SidebarProps> = ({ onClose }) => {
  const { t } = useTranslation();
  const navigate = useNavigate();
  const location = useLocation();
  const theme = useTheme();
  
  const { user } = useSelector((state: RootState) => state.auth);

  const menuItems: MenuItem[] = [
    {
      text: t('sidebar.home'),
      path: '/',
      icon: <HomeIcon />
    },
    {
      text: t('sidebar.articles'),
      path: '/articles',
      icon: <ArticleIcon />
    },
    {
      text: t('sidebar.categories'),
      path: '/categories',
      icon: <CategoryIcon />
    },
    {
      text: t('sidebar.tags'),
      path: '/tags',
      icon: <TagIcon />
    },
    {
      text: t('sidebar.dashboard'),
      path: '/admin/dashboard',
      icon: <DashboardIcon />,
      roles: ['ADMIN']
    },
    {
      text: t('sidebar.settings'),
      path: '/settings',
      icon: <SettingsIcon />,
      roles: ['ADMIN']
    }
  ];

  const handleNavigate = (path: string) => {
    navigate(path);
    onClose?.();
  };

  return (
    <Box sx={{ width: '100%', pt: 8 }}>
      {user && (
        <Box sx={{ p: 2, textAlign: 'center' }}>
          <Avatar
            src={user.avatar}
            alt={user.username}
            sx={{
              width: 64,
              height: 64,
              margin: '0 auto',
              mb: 1,
              bgcolor: theme.palette.primary.main
            }}
          >
            {user.username.charAt(0).toUpperCase()}
          </Avatar>
          <Typography variant="subtitle1" noWrap>
            {user.username}
          </Typography>
          <Typography variant="body2" color="text.secondary" noWrap>
            {user.email}
          </Typography>
        </Box>
      )}

      <Divider />

      <List>
        {menuItems.map((item) => {
          // 检查用户权限
          if (item.roles && (!user || !item.roles.includes(user.role))) {
            return null;
          }

          return (
            <ListItem key={item.path} disablePadding>
              <ListItemButton
                selected={location.pathname === item.path}
                onClick={() => handleNavigate(item.path)}
              >
                <ListItemIcon>{item.icon}</ListItemIcon>
                <ListItemText primary={item.text} />
              </ListItemButton>
            </ListItem>
          );
        })}
      </List>

      <Divider />

      {user && (
        <List>
          <ListItem disablePadding>
            <ListItemButton onClick={() => handleNavigate('/profile')}>
              <ListItemIcon>
                <PersonIcon />
              </ListItemIcon>
              <ListItemText primary={t('sidebar.profile')} />
            </ListItemButton>
          </ListItem>
        </List>
      )}
    </Box>
  );
};

export default Sidebar; 